<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="fonts/style.css" />
		<style type="text/css">
			.image-player {
				width: 740px;
				height: 350px;
				margin: 50px auto;
			}
			
			#player-bt {
				position: absolute;
				color: #ccc;
			}
			
			.image-player>span {
				position: absolute;
				color: #CCCCCC;
				font-size: 50px;
			}
			.dot-color{
				color: #0000ff;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				var player = $(".image-player");
				player.append("<img src='img/2.jpg'/>");
				player.append("<span class='left-arrow icon-uniE67D' style='cursor:pointer'></span>");
				player.append("<span class='right-arrow icon-uniE63D' style='cursor:pointer'></span>");
				player.append("<div id='player-bt' style='cursor:pointer'></div>");
				var bt = $("#player-bt");
				for(var i = 0; i < 5; i++) {
					bt.append("<span class='icon-uniE619'></span>");
				}
				var h = $(".image-player img");

				h.load(function(e) {
					var img = e.target || e.srcElement;
					var pos = $(".image-player").offset();
					var bt = $("#player-bt");
					bt.css("top", pos.top + img.height - 30);
					bt.css("left", pos.left + ((img.width - bt.width()) / 2));
					var leftarrow = $(".left-arrow");
					var rightarrow = $(".right-arrow");
					leftarrow.css("top", pos.top + ((img.height - leftarrow.height()) / 2));
					rightarrow.css("top", pos.top + ((img.height - leftarrow.height()) / 2));
					leftarrow.css("left", pos.left);
					rightarrow.css("left", pos.left + img.width - rightarrow.width());
				});
				var dots = $(".icon-uniE619");
				$(dots[1]).addClass("dot-color");
				$(".left-arrow").click(function() { //左边切换键
					var imgsrc = $("img").attr("src"); //获取到src属性值  例如（ img/2.jpg）
					var imges = imgsrc.split("."); //获取前半部分通过点好分离  例如（img/2）
					var imgnum = imges[0].split("/"); //获取到数字 通过/分离  例如（2）
					$("img").attr('src', "img/" + (imgnum[1] * 1 - 1) + ".jpg"); //设置img的属性值这里用*1是因为获取到的是字符串，通过*1变为num
					if(imgnum[1] == 1) {
						$("img").attr('src', "img/5.jpg");
					}
				});
				function nextimg() {
					var imgsrc = $("img").attr("src");
					var imges = imgsrc.split(".");
					var imgnum = imges[0].split("/");
					var i=imgnum[1]*1;
					i++;
					if(i==6) i=1;
					$("img").attr('src', "img/" + i + ".jpg");
					
					var dot=dots[i-1];
					change_dot_color(dots,dot);
				}
				$(".right-arrow").click(nextimg);
				var intv;
				$(".image-player").mouseover(function () {
					clearInterval(intv);
				});
				$(".image-player").mouseout(function () {					
					intv=setInterval(nextimg,3000);
				});
				
				$.each(dots, function(index,dot) {
					var i=index+1;
					var d=dot;
					$(dot).mouseover(function () {
						var dot=d;
						change_dot_color(dots,dot);
						$("img").attr('src', "img/" + i + ".jpg");
					});
				});
				
				function change_dot_color (dots,dot) {
					dots.removeClass("dot-color");
					$(dot).addClass("dot-color");
				}
			});
		</script>
	</head>

	<body>
		<div class="image-player">
		</div>
	</body>

</html>